define('pc/js/mod/ucenter/vue-account-base', [
    'utils/fetchEnhancer',
    'utils/helpers',
    'utils/Time',
    'pc/js/components/Calendar/Calendar'], (fetch, helpers, Time, Calendar) => {

const VueAccountBase = {
    props: ['strUid'],
    data: function() {
        return {
            gender: '0',
            intro: '',
            birthday: ''
        }
    },
    methods: {
        fetchData: function() {
            fetch('/api/account/getloginuser').then((res) => {
                if(0 === res.status) {
                    this.gender = res.data.data.gender;
                    this.intro = res.data.data.short_intro;
                    this.birthday = 0 === parseInt(res.data.data.birthday, 10)
                        ? ''
                        : Time.format('y-m-d h:i', res.data.data.birthday * 1000);
                }
            });
        },
        doEdit: function(e) {
            let btn = e.target;
            let birthday = this.birthday;
            birthday = birthday.replace(/\-/g, '/');

            if('' === birthday) {
                birthday = Math.round(new Date().getTime() / 1000);
            } else {
                birthday = Math.round(new Date(birthday).getTime() / 1000);
            }

            let ret = {
                gender: this.gender,
                short_intro: this.intro,
                birthday: birthday
            };

            btn.disabled = true;
            fetch('/api/account/editbase', {
                method: 'POST',
                body: helpers.json2Query(ret)
            }).then((res) => {
                btn.disabled = false;

                if(0 === res.status) {
                    XUI.toast.success('修改成功');
                } else {
                    XUI.toast.error('修改失败 ' + res.status);
                }
            });
        },
    },
    created: function() {
        this.calendar = new Calendar({
            onPick: (ret) => {
                // 修改 model 数据
                this.birthday = ret;
            },
            timeDisplayFormat: (h, m) => {
                return this.calendar.lPad(h) + ':' + this.calendar.lPad(m) + ' 左右';
            }
        });
    },
    mounted: function() {
        this.fetchData();
    },
    updated: function() {
        this.calendar.bindTo(document.getElementById('birthday'));
    },
    template:
`<div>
    <h2 class="uc-itemtitle">我的信息</h2>
    <div class="uc-content-wrapper">
        <div class="uc-form-item">
            <label class="uc-form-label">性别</label>
            <div class="uc-form-control">
                <select v-model="gender" class="x-select">
                    <option value="0">女</option>
                    <option value="1">男</option>
                    <option value="2">保密</option>
                </select>
            </div>
        </div>
        <div class="uc-form-item">
            <label class="uc-form-label">我的简介</label>
            <div class="uc-form-control">
                <textarea v-model="intro" class="x-textarea" cols="30" rows="2"></textarea>
            </div>
        </div>
        <div class="uc-form-item">
            <label class="uc-form-label">出生日期</label>
            <div class="uc-form-control">
                <input v-model="birthday" id="birthday" type="text" readonly="readonly" class="x-input">
            </div>
        </div>
        <div class="uc-form-item">
            <label class="uc-form-label">&nbsp;</label>
            <div class="uc-form-control">
                <button v-on:click="doEdit" type="button" class="x-btn">保存</button>
            </div>
        </div>
    </div>
</div>`
};

return VueAccountBase;

});
